<template>
	<div class="permission-role">
		<!--上面的东西-->
		<bread-crumb divider><template slot="title">菜单管理</template></bread-crumb>
		<div>
			<h4>目前只提供删除功能，需要在手动在数据库中添加</h4>
			<!--<el-button type="success" size="small" @click="visibleDialog=true">添加一级菜单</el-button>-->
		</div>

		<!--表格-->
		<el-table :data="menu" size="" v-loading="loading"  border style="width:100%">
			<el-table-column prop="id" label="id" width="70"></el-table-column>
			<el-table-column label="菜单名称" width="">
				<template  slot-scope="scope">
					<div>{{scope.row.title}}</div>
					<el-table :data="scope.row.children" size=""  border style="width:100%">
						<el-table-column prop="id" label="id" width="70"></el-table-column>
						<el-table-column prop="title" label="二级菜单" width=""></el-table-column>
						<el-table-column prop="path" label="路径" width=""></el-table-column>
						<el-table-column label="操作" fixed="right" width="170">
							<template slot-scope="scope">
								<el-button type="danger" size="small" @click="delMenu(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column prop="icon" label="图标" width="120"></el-table-column>
			<el-table-column prop="indexKey" label="索引" width="50"></el-table-column>

			<el-table-column label="操作" fixed="right" width="170">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="delMenu(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--<table class="menu-table">-->
		<!--	<tr>-->
		<!--		<td></td>-->
		<!--	</tr>-->
		<!--</table>-->

		<!--弹层-->
		<el-dialog title="创建一级菜单" :visible.sync="visibleDialog" width="30%" >
			<div class="global-input-content">
				<div class="forms">
					<div class="row">
						<div class="title">菜单名称</div>
						<input class="input main-input" type="text" v-model="submitData.title" maxlength="15" />
					</div>
				</div>
				<div class="btn-group mt10">
					<el-button  type="success" @click="actSubmit">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import breadCrumb from '@/views/components/breadCrumb';
import { mixinUtils } from '@/mixins/mixins.utils';
import {
	apiMenuDelOfLevel1, apiMenuDelOfLevel2,
	apiMenuList,
	apiNodeApplyHandle,
	apiRoleAdd,
	apiRoleList,
	apiRoleMenuList,
	apiRoleMenuUpdate,
} from '@/axios/api.system';
import { mapState } from 'vuex';
export default {
	name: 'permissionMenu',
	mixins: [mixinUtils],
	components: {breadCrumb},
	data:function(){
		return {

			visibleDialog:false,//

			//复杂值

			dataList: [],
			submitData:{
				title:'',
			},

			//有权限菜单相关
			menu: [], //本页自己加载的菜单，不使用全局的
		}
	},
	computed:{
		...mapState(['loading']),
	},
	created() {
		this.getMenuList()
	},
	methods:{

		//获取菜单
		getMenuList() {
			apiMenuList().then(res => {
				this.menu = res.data
			}).catch(err => {
				console.log(err)
			})
		},

		//提交
		actSubmit(){
			this.visibleDialog = false
			//限制
			if(this.submitData.title.trim() == ''){
				this.$message.error('角色名称为空')
				return false
			}
			//执行
			this.confirm('确定要这么干吗？',()=> {
				apiRoleAdd(this.submitData).then((res)=>{
					if(res.resultFlag){
						this.notify('操作成功')
						this.getDataList()
						this.submitData.title = ''//清空
					}else{
						this.$message({type:'warning',message:res.resultMsg})
					}
				})
			})
		},

		//删除菜单
		delMenu(row) {
			let tip = row.parentId == 0 ? '删除一级菜单' : '删除二级菜单'
			this.confirm('确定要'+tip+ "["+ row.title + "]吗？",()=> {
				console.log('哈哈哈,',row.parentId)
				//判断是删除一级还是二级
				if( row.parentId == 0 ) {
					console.log('删除一级菜单')
					apiMenuDelOfLevel1({id:row.id}).then((res)=>{
						this.funcDelmenuCb(res)
					})
				} else {
					console.log('删除二级菜单')
					apiMenuDelOfLevel2({id:row.id}).then((res)=>{
						this.funcDelmenuCb(res)
					})
				}

			})
		},

		//删除菜单回调
		funcDelmenuCb(res){
			if(res.resultFlag == true){
				this.getMenuList()
				this.notify('操作成功','','success')
			}else{
				this.$message({type:'error',message:res.resultMsg})
			}
		},



		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////
		/////////////////////////////////////////////其它////////////////////////////////////////////////

		handleSizeChange (val) {
			console.log('改变每页数',val)
			this.page = 1 //恢复第一页
			this.pageSize = val
			this.getDataList()
		},
		handleCurrentChange (val) {
			console.log('改变当前页',val)
			this.page = val
			this.getDataList()
		},
	}

}
</script>

<style lang="less" scoped>
@import '~@/assets/global.less';
	.role-list{
		height:60vh!important;overflow-y: scroll;
		//border:1px solid #666;
		background-color: #f9f9f9;
		padding:10px;
		box-shadow: inset 2px 2px 2px #ddd;
		.checkbox-row{
			padding:10px 0px;
			border-bottom:1px solid #ddd;
			.title{font-weight: bold;.flex-jcsb()}
		}
	}
</style>
